<template>
  <el-container v-loading="loading">
    <!--  功能按钮组 start  -->
    <el-header height="42px">
      <el-button-group class="ik-list-menu">
        <!-- 编辑模式  add - 新增模式, edit - 编辑模式, details - 详情模式 -->
        <el-button
          v-if="mode === 'edit' || mode === 'details'"
          class="ik-list-menu-btn"
          size="medium"
          @click="infoCreateBtn"
        >新增
        </el-button>
        <el-button v-if="mode === 'details'" class="ik-list-menu-btn" size="medium" @click="infoUpdateBtn">修改
        </el-button>
        <el-button
          v-if="mode === 'edit' || mode === 'details'"
          class="ik-list-menu-btn"
          size="medium"
          @click="infoCopyBtn"
        >复制
        </el-button>
        <el-button v-if="mode === 'edit'" class="ik-list-menu-btn" size="medium" @click="infoDetailsBtn">详情
        </el-button>
        <el-button
          v-if="mode === 'add' || mode === 'edit'"
          class="ik-list-menu-btn"
          size="medium"
          @click="infoSaveBtn"
        >
          保存
        </el-button>
        <el-button class="ik-list-menu-btn" size="medium" @click="infoCancelBtn">取消</el-button>
      </el-button-group>
    </el-header>
    <!--  功能按钮组 end  -->
    <!--  表单区 start  -->
    <el-main>
      <el-form
        id="ik-info-head"
        v-model="formData"
        class="ik-info-head"
        :inline="true"
        label-width="120px"
        :disabled="mode === 'details'"
      >
        <el-row v-for="row in formItems" :key="row.rowIndex">
          <el-col v-for="col in row.items" :key="col.id" :span="col.span">
            <ik-form-select
              v-if="col.type==='select'"
              :ref="`input_${col.code}`"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              key-field="key"
              value-field="value"
              @onFieldChange="onFieldChange"
            />
            <ik-form-group-select
              v-else-if="col.type==='group'"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              :url="col.config.url"
              :data-down="loading"
            />
            <ik-form-date
              v-else-if="col.type==='date'"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              :url="col.config.url"
              @onFieldChange="onFieldChange"
            />
            <ik-form-time
              v-else-if="col.type==='time'"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              :url="col.config.url"
              @onFieldChange="onFieldChange"
            />
            <ik-form-datetime
              v-else-if="col.type==='datetime'"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              :url="col.config.url"
              @onFieldChange="onFieldChange"
            />
            <ik-form-number
              v-else-if="col.type==='number'"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              @onFieldChange="onFieldChange"
            />
            <ik-form-id
              v-else-if="col.type==='id'"
              :ref="`input_${col.code}`"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              @onFieldChange="onFieldChange"
            />
            <ik-form-image-oss
              v-else-if="col.type==='oss'"
              :ref="`input_${col.code}`"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              @onFieldChange="onFieldChange"
            />
            <ik-form-video-oss
              v-else-if="col.type==='video'"
              :ref="`input_${col.code}`"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              @onFieldChange="onFieldChange"
            />
            <ik-form-popup-select
              v-else-if="col.type==='popup'"
              :ref="`input_${col.code}`"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              v-on="col.handleEvent"
            />
            <ik-form-editor
              v-else-if="col.type==='editor'"
              :ref="`input_${col.code}`"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              v-on="col.handleEvent"
            />
            <ik-form-text
              v-else
              :ref="`input_${col.code}`"
              v-model="formData[col.code]"
              :code="col.code"
              :name="col.name"
              v-bind="col.config"
              @onFieldChange="onFieldChange"
            />
          </el-col>
        </el-row>
      </el-form>
    </el-main>
    <!--  表单区 end  -->
  </el-container>
</template>
<script>
import { getById, save, update } from '@/api/ik/data/dataApi'

export default {
  props: {
    formItems: {
      type: Array,
      default: () => []
    },
    webPath: {
      type: String,
      default: ''
    },
    bgPath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 页面模式
      mode: "add",
      // 表单数据
      formData: {},
      // 数据记录的id
      id: "",
      // 页面loading
      loading: false,
      // 验证器
      verify: {
        head: {},
        body: {}
      }
    }
  },
  created() {
    this.mode = this.$route.params.mode || "add"
    this.id = this.$route.query.id || 0
    if (this.id !== 0) {
      this.get(this.id)
    }
  },
  methods: {
    /**
     * 获取数据
     * @param id
     */
    get(id) {
      this.loading = true
      getById(this.bgPath, id)
        .then(res => {
          this.formData = res.data.head
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 更新表单
     * @param formData
     */
    updateFormData(formData) {
      this.formData = { ...this.formData, ...formData }
    },
    // --- 事件 ---
    /**
     * 信息页创建按钮点击
     */
    infoCreateBtn() {
      this.$router.push({ path: '/business/manager/' + this.webPath + '/info/add' })
    },
    /**
     * 信息页编辑按钮点击
     */
    infoUpdateBtn() {
      this.mode = "edit"
    },
    /**
     * 复制按钮点击事件
     */
    infoCopyBtn() {
      // 修改id为控制
      this.formData.id = 0
      // 修改为编辑模式
      this.mode = "edit"
    },
    /**
     * 详情按钮被点击
     */
    infoDetailsBtn() {
      // 修改为编辑模式
      this.mode = "details"
      this.get(this.data.head.id)
    },
    /**
     * 保存按钮点击事件
     */
    infoSaveBtn() {
      console.log("save", this.formData)
      this.saveOrUpdate()
    },
    /**
     * 取消按钮点击事件
     */
    infoCancelBtn() {
      this.$router.push({ path: '/business/manager/' + this.webPath + '/list/list' })
    },
    /**
     * 字段变更事件
     * @param fieldName
     * @param oldValue
     * @param newValue
     * @param errorSign
     */
    onFieldChange(fieldName, oldValue, newValue, errorSign) {
      this.$set(this.formData, fieldName, newValue)
      this.verify.head['head' + '-' + fieldName] = errorSign
      this.$emit('onFieldChange', fieldName, oldValue, newValue)
    },
    /**
     * 保存或修改数据
     */
    saveOrUpdate() {
      // 验证
      for (const headInd in this.verify.head) {
        if (this.verify.head[headInd]) {
          this.$message({ type: 'error', message: '数据格式异常' })
          console.log(this.verify)
          return
        }
      }
      for (const bodyInd in this.verify.body) {
        if (this.verify.body[bodyInd]) {
          console.log(this.verify.body[bodyInd])
          this.$message({ type: 'error', message: '数据格式异常' })
          console.log(this.verify)
          return
        }
      }
      const pd = {
        head: { ...this.formData },
        body: {}
      }
      if (this.formData.id) {
        this.loading = true
        update(this.bgPath, pd).then(response => {
          // 设置ID
          this.id = response.data
          // 刷新数据
          this.get(response.data)
          this.$message({
            type: 'success',
            message: '数据已保存!'
          })
          this.mode = "details"
        })
          .finally(() => {
            this.loading = false
          })
      } else {
        this.loading = true
        save(this.bgPath, pd).then(response => {
          // 设置ID
          this.id = response.data
          // 刷新数据
          this.get(response.data)
          this.$message({
            type: 'success',
            message: '数据已保存!'
          })
          this.mode = "details"
        })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/listinfo";

.data-directory-tabs-info {
  height: calc(100% - 60px);
}

.data-directory-tabs-info .el-tabs__content {
  height: calc(100% - 53px);
  overflow: auto;
  min-height: 350px;
}
</style>
